<template>
  <div class="container">
    <div class="content">
      <div class="content-group" v-for="(item, index) in list" :key="index">
        <div class="content-group-item">
          <uni-row>
            <uni-col :span="6"> 项目名称 </uni-col>
            <uni-col :span="18">
              {{ item.name }}
            </uni-col>
          </uni-row>
        </div>
        <div class="content-group-item">
          <uni-row>
            <uni-col :span="6"> 检查地址 </uni-col>
            <uni-col :span="18">
              {{ item.address }}
            </uni-col>
          </uni-row>
        </div>
        <div class="content-group-item">
          <uni-row>
            <uni-col :span="6"> 检查结果 </uni-col>
            <uni-col :span="18">
              {{ item.result }}
            </uni-col>
          </uni-row>
        </div>
        <div class="content-group-item">
          <uni-row>
            <uni-col :span="6"> 结果单位 </uni-col>
            <uni-col :span="18">
              <uni-tag :inverted="true" :text="item.unit" type="warning" />
            </uni-col>
          </uni-row>
        </div>
        <div class="content-group-item">
          <uni-row>
            <uni-col :span="6"> 检查状态 </uni-col>
            <uni-col :span="18">
              <uni-tag
                :inverted="true"
                :text="item.stateText"
                type="success"
                v-if="item.state === 1"
              />
              <uni-tag
                :inverted="true"
                :text="item.stateText"
                type="error"
                v-else
              />
            </uni-col>
          </uni-row>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  computed: {
    list() {
      return Array(3).fill({
        name: "内科",
        address: "一楼120",
        result: "健康",
        unit: "kg",
        state: 1,
        stateText: "已检",
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.content {
  border-radius: 8px;

  margin-bottom: 1rem;
}
.content-group {
  border-radius: 8px;
  margin: 0.625rem;
  border: 1px solid #ebeef5;
  background-color: #fff;
  box-shadow: 0 2px 12px 0 rgba(151, 203, 245, 0.5);
}
.content-group-item {
  padding: 10px;
  font-size: 12px;
}
</style>